<template>
  <div>
    <div class="wrapper">
      <div class="bg">
        <img src="http://assets.rurushishi.com/activies/zdfzh/index_bg.jpg" alt>
      </div>
      <!-- <div class="music" @click="clickMusic" :class="{'bor':isplay}">
        <img src="http://assets.rurushishi.com/activies/zdfzh/music.png" alt>
      </div>-->
      <div class="count">围观人数：{{count.total}} 中奖人数：{{ count.prizeCount }}</div>
      <div class="liupan">
        <img src="http://assets.rurushishi.com/activies/zdfzh/index_liupanlianhe.png" alt>
      </div>
      <div class="voice">
        <img
          @click="clickVoice"
          src="http://assets.rurushishi.com/activies/zdfzh/index_voice.png"
          alt
        >
      </div>
      <div class="btns">
        <div>
          <img
            class="saclebtn"
            @click="clickRank"
            src="http://assets.rurushishi.com/activies/zdfzh/index_rank.png"
            alt
          >
        </div>
        <div>
          <img
            class="saclebtn"
            @click="clickPrize"
            src="http://assets.rurushishi.com/activies/zdfzh/index_prizes.png"
            alt
          >
        </div>
        <div>
          <img
            class="saclebtn"
            @click="clickRule"
            src="http://assets.rurushishi.com/activies/zdfzh/index_rule.png"
            alt
          >
        </div>
      </div>
      <div class="lp">
        <img v-for="item in lp" :src="item.imgUrl" @click="clickLp(item)" alt>
      </div>
      <music></music>
      <share :isshare="isshare"></share>
      <Bottom :baseText="baseText"></Bottom>
    </div>
  </div>
</template>
<script>
import { MessageBox } from "mint-ui";
import request from "@/utils/request";
import wx from "weixin-js-sdk";
import * as config from "./config";
import Cookies from "js-cookie";
import Share from "./components/Share";
import Bottom from "@/components/common/Bottom";
import music from "./components/music";
export default {
  components: {
    share: Share,
    Bottom: Bottom,
    music: music
  },
  data() {
    return {
      openid: Cookies.get("openid"),
      userInfo: null, //用户信息
      // 统计信息接口返回的对象
      count: {
        isVoice: false,
        isVote: false,
        powerCount: 0,
        powerPrizeCount: 0,
        prizeCode: null,
        prizeCount: 0, //中奖人总数
        total: 0 //参与人总数
      },
      // 接收到的传播信息
      receiveSpreadInfo: {
        channel: 0, //渠道
        fuid: "", //传播者的openid
        ouid: "" //销售或渠道的openid
      },
      isplay: false, //音乐是否播放
      isshare: false, //是否开启分享 也用于从别的页面返回回来展示分享
      baseText: config.BASE_TEXT, //页脚文本
      // 楼盘信息
      lp: [
        {
          name: "中鼎理想城",
          imgUrl:
            "http://assets.rurushishi.com/activies/zdfzh/index_lp_zdlxc.png",
          link: "https://w.url.cn/s/AvU2w52"
        },
        {
          name: "中鼎麒麟郡+",
          imgUrl:
            "http://assets.rurushishi.com/activies/zdfzh/index_lp_zdqlj.png",
          link: "https://w.url.cn/s/Apptpxc"
        },
        {
          name: "中鼎麒麟公馆",
          imgUrl:
            "http://assets.rurushishi.com/activies/zdfzh/index_lp_zdqlgg.png",
          link: "https://w.url.cn/s/Acd02eo"
        },
        {
          name: "七拾九號院",
          imgUrl:
            "http://assets.rurushishi.com/activies/zdfzh/index_lp_qsjhy.png",
          link: "https://w.url.cn/s/AdgTTPF"
        },
        {
          name: "中鼎麒麟湾",
          imgUrl:
            "http://assets.rurushishi.com/activies/zdfzh/index_lp_zdqlw2.png",
          link: "https://w.url.cn/s/AatN7bW"
        }
      ]
    };
  },
  methods: {
    // 点击读语音
    clickVoice() {
      this.gotoUrl("voice");
    },
    // 点击排行
    clickRank() {
      // this.gotoUrl("rank");
      this.pushUrl("rank");
    },
    // 点击奖品
    clickPrize() {
      // this.gotoUrl("prize");
      this.pushUrl("prize");
    },
    // 点击规则说明
    clickRule() {
      // this.gotoUrl("rule");
      this.pushUrl("rule");
    },
    // 点击楼盘
    clickLp(item) {
      location.href = item.link;
    },
    // 参加活动，返回是否领过读语言和助力的奖品、统计人数
    getCount() {
      let that = this;
      request
        .post(
          `${that.global.API_ACT_URL}participate?activityId=${
            config.activityId
          }&openId=${that.openid}&channel=${that.receiveSpreadInfo.channel}${
            that.receiveSpreadInfo.fuid
              ? "&fromOpenId=" + that.receiveSpreadInfo.fuid
              : ""
          }`,
          {}
        )
        .then(function(data) {
          if (data.total) {
            data.total = (data.total * 1.5).toFixed(0);
          }
          // if (data.prizeCount) {
          //   data.prizeCount = (data.prizeCount * 1.5).toFixed(0);
          // }
          that.count = data;
        });
    },
    // 获取我的排名
    getMyRanking() {
      let that = this;
      return new Promise(function(resolve, reject) {
        request
          .get(`${that.global.API_ACT_URL}getMyRanking`, {
            activityId: config.activityId,
            openId: that.openid
          })
          .then(function(data) {
            resolve(data);
          });
      });
    },
    // 获取我的奖品
    getMyPrizes() {
      let that = this;
      return new Promise(function(resolve, reject) {
        request
          .get(`${that.global.API_ACT_URL}getMyPrizes`, {
            activityId: config.activityId,
            openId: that.openid
          })
          .then(function(data) {
            resolve(data);
          });
      });
    },
    // 提交分享成功回调
    shareCallBack() {
      let that = this;
      request
        .post(
          `${that.global.API_ACT_URL}share?activityId=${
            config.activityId
          }&openId=${that.openid}`,
          {}
        )
        .then(function(data) {
          that.isshare = false;
        });
    },

    // 直接跳转本项目的其他链接
    gotoUrl(page) {
      // 带上本页面的传播信息
      let url =
        location.protocol +
        "//" +
        location.host +
        this.global.GLOBAL_BASE_PATH +
        "/";
      let fullPathNoShare = this.$route.fullPath;
      fullPathNoShare = fullPathNoShare.replace("?isshare=1", "");
      fullPathNoShare = fullPathNoShare.replace("&isshare=1", "");
      if (fullPathNoShare.indexOf("?") > -1) {
        url += page + "?" + fullPathNoShare.split("?")[1];
      } else {
        url += page;
      }
      location.href = url;
    },
    // 通过路由方式跳转本项目的其他链接
    pushUrl(page) {
      // 带上本页面的传播信息
      let url = "";
      let fullPathNoShare = this.$route.fullPath;
      fullPathNoShare = fullPathNoShare.replace("?isshare=1", "");
      fullPathNoShare = fullPathNoShare.replace("&isshare=1", "");
      if (fullPathNoShare.indexOf("?") > -1) {
        url = page + "?" + fullPathNoShare.split("?")[1];
      } else {
        url = page;
      }
      this.$router.push("/" + url);
    },
    /**
     * 初始化
     * 1、设置传播传播信息
     * 2、获取用户信息
     * 3、设置分享信息
     */
    init() {
      let that = this;
      // 设置传播信息
      if (this.$route.query.channel)
        this.receiveSpreadInfo.channel = this.$route.query.channel;
      if (this.$route.query.fuid)
        this.receiveSpreadInfo.fuid = this.$route.query.fuid;
      if (this.$route.query.ouid)
        this.receiveSpreadInfo.ouid = this.$route.query.ouid;
      if (this.$route.query.isshare) that.isshare = true;
      config.getUserInfo().then(function(userInfo) {
        that.userInfo = userInfo;
        that.getCount();
        // 设置分享 标题 链接 回调
        let shareObj = {
          title: "",
          link: ""
        };
        if (
          that.userInfo &&
          that.userInfo.user &&
          that.userInfo.user.nickname
        ) {
          shareObj.title = `${
            that.userInfo.user.nickname
          }邀请你跟我一起读语音赢奖品，读出你的“国际范儿”`;
        }

        if (that.userInfo.salerOrAgent) {
          // 是销售或者渠道,更新ouid
          shareObj.link = `${config.SHARE_LINK}?channel=${
            that.receiveSpreadInfo.channel
          }&fuid=${that.openid}&ouid=${that.openid}`;
        } else {
          shareObj.link = `${config.SHARE_LINK}?channel=${
            that.receiveSpreadInfo.channel
          }&fuid=${that.openid}${
            that.receiveSpreadInfo.ouid
              ? "&ouid=" + that.receiveSpreadInfo.ouid
              : ""
          }`;
        }
        config.initShare(shareObj);
        that.global.SHARE_CALLBACK_OK = function(type) {
          that.shareCallBack();
        };
      });
    }
  },
  mounted() {},
  created() {
    this.init();
    this.getMyPrizes().then(dataPrize => {
      if (dataPrize["3"].prize && dataPrize["3"].codeStatus == 1) {
        this.getMyRanking().then(dataRank => {
          if (dataRank && dataRank.myRank && dataRank.myRank.rankNo) {
            MessageBox.alert(
              `恭喜您中奖啦！您在本次助力活动中排名第${
                dataRank.myRank.rankNo
              }，获得了${
                dataPrize["3"].prize
              }一份，请到“奖品兑换”填写您的领奖信息`
            ).then(() => {});
          }
        });
      }
    });
  }
};
</script>
<style lang="stylus" scoped>
@import '~@/assets/styles/mixins.styl';
@import 'comm.styl';

.wrapper {
  width: 100%;
  position: absolute;
}

.bg {
  position: absolute;
  width: 100%;
}

.bg img {
  width: 100%;
}

.liupan {
  position: absolute;
  top: 4.4rem;
  width: 100%;
  text-align: center;
}

.liupan img {
  width: 50%;
}

.count {
  color: #fff;
  position: absolute;
  top: 5.1rem;
  text-align: center;
  width: 100%;
  padding-top: 0.1rem;
}

.voice {
  position: absolute;
  top: 5.8rem;
  width: 100%;
  text-align: center;
}

.voice img {
  width: 50%;
  animation: shakes 1s infinite linear;
}

.btns {
  position: absolute;
  top: 7.5rem;
  width: 80%;
  margin-left: 10%;
  margin-right: 10%;
  display: flex;
  justify-content: space-around;
}

.btns >div {
  width: 30%;
}

.btns >div >img {
  width: 100%;
}

.lp {
  position: absolute;
  top: 11.7rem;
  width: 100%;
  text-align: center;
}

.lp img {
  width: 80%;
  margin-bottom: 0.2rem;
}

@keyframes roll {
  0% {
    transform: rotate(0deg);
  }

  50% {
    transform: rotate(360deg);
  }
}

@keyframes shakes {
  0% {
    transform: rotate(0);
  }

  5% {
    transform: rotate(10deg);
  }

  10% {
    transform: rotate(-9deg);
  }

  15% {
    transform: rotate(8deg);
  }

  20% {
    transform: rotate(-7deg);
  }

  25% {
    transform: rotate(6deg);
  }

  30% {
    transform: rotate(-5deg);
  }

  35% {
    transform: rotate(4deg);
  }

  40% {
    transform: rotate(-3deg);
  }

  45% {
    transform: rotate(2deg);
  }

  50% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(0deg);
  }
}

// 重写组件样式
.baseBottom {
  position: fixed;
}
</style>
